<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 100px;
				height: 100px;
				background-color: red;
				padding: 10px;
				border: 10px solid yellow;
			}
			#box2{
				padding: 100px;
				background-color: #bfa;
			}
			#box4{
				width: 200px;
				height: 300px;
				background-color: #bfa;
				overflow: auto;
			}
			#box5{
				width: 450px;
				height: 600px;
				background-color: yellow;
			}
		</style>
		<script type="text/javascript">
			window.onload = function(){
				var box1 = document.getElementById("box1");
				var btn01 = document.getElementById("btn01");
				var box4 = document.getElementById("box4");
				
				btn01.onclick = function(){
					// clientWidth
					// clientHeight
						// 这两个属性可以获取元素的可见宽度和高度
						// 这些属性都是不带px的,返回都是一个数字,可以直接进行计算
						// 会获取元素宽度和高度,包括内容区和内边距
						// 这些属性都是只读的,不能修改
					// alert(box1.clientWidth);
					// alert(box1.clientHeight);
					// box1.clientHeight = 300;
					
					// offsetWidth
					// offsetHeight
					//     获取元素的整个的宽度和高度,包括内容区,内边距和边框
					// alert(box1.offsetWidth);
					
					// offsetParent
						// 可以用来获取当前元素的定位父元素
						// 会获取到离当前元素最近的开启了定位的祖先元素
							// 如果所有的祖先元素都没有开启定位,则返回body
					// var op = box1.offsetParent;
					// alert(op.id)
					
					// offsetLeft
					// 	当前元素相对于其定位父元素的水平偏移量
					// offsetTop
					// 	当前元素相对于其定位父元素的垂直偏移量
					// alert(box1.offsetLeft)
					
					// scrollWidth
					// scrollHeight
					// 	可以获取元素整个滚动区域的宽度和高度
					// alert(box4.clientHeight);
					// alert(box4.scrollHeight);
					// alert(box4.scrollWidth);
					
					// scrollLeft
					// 	可以获取水平滚动条滚动的距离
					// scrollTop
					// 	可以获取垂直滚动条滚动的距离
					// alert(box4.scrollLeft);
					// alert(box4.scrollTop)
					
					// alert(box4.clientHeight);//283
					
					// 当满足scrollHeight - scrollTop == clientHeight
					// 说明垂直滚动条滚动到底了
					
					// 当满足scrollWidth - scrollLeft == clientWidth
					// 说明水平滚动条滚动到底了
					// alert(box4.scrollHeight - box4.scrollTop);//600
				}
				
			}
						
		</script>
	</head>
	<body id="body">
		<button id="btn01">点我一下</button>
		<br/><br/>
		<div id="box4">
			<div id="box5"></div>
		</div>
		<br/><br/>
		<div id="box3">
			<div id="box2" style="position: relative;">
				<div id="box1"></div>			
			</div>
		</div>		
	</body>
</html>
